<!--
 * @Author: 郭招娣 10615594+guo-zhaodi@user.noreply.gitee.com
 * @Date: 2022-08-24 11:53:01
 * @LastEditors: 郭招娣 10615594+guo-zhaodi@user.noreply.gitee.com
 * @LastEditTime: 2022-08-27 10:01:36
 * @FilePath: \后端管理系统\app\src\views\Goods\component\AddForm.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <el-form
    :model="ruleForm"
    :rules="rules"
    ref="ruleForm"
    label-width="100px"
    class="demo-ruleForm"
  >
    <el-form-item label="活动名称" prop="goods_name">
      <el-input v-model="ruleForm.goods_name"></el-input>
    </el-form-item>
    <el-form-item label="商品价格" prop="goods_price">
      <el-input type="textarea" v-model="ruleForm.goods_price"></el-input>
    </el-form-item>
    <el-form-item label="商品数量" prop="goods_number">
      <el-input type="textarea" v-model="ruleForm.goods_number"></el-input>
    </el-form-item>
    <el-form-item label="商品重量" prop="goods_weight">
      <el-input type="textarea" v-model="ruleForm.goods_weight"></el-input>
    </el-form-item>
  <el-form-item label="商品分类" prop="goods_cat">
      <el-cascader
      v-model="ruleForm.goods_cat"
      :options="options"
      :props="{
        expandTrigger: 'hover',
        value: 'cat_id',
        label: 'cat_name'
      }"
      @change="handleChange"
      ></el-cascader>
      
    </el-form-item>
  </el-form>
</template>

<script>
import { httpCateGories } from "../../../api/goods.js";
export default {
  props: {
    ruleForm: {
      type: Object,
      default: () => {
        return {
          goods_cat: "",
          goods_name: "",
          goods_price: 0,
          goods_number: 0,
          goods_weight: 0,
        };
      },
    },
    shopValues: {
      type: Boolean,
      default: () => {
        return false;
      },
    },
   
  },
  // 监听
  watch: {
    shopValues(newVal, prevVal) {
      if (newVal) {
        this.$refs["ruleForm"].validate((valid) => {
          if (valid) {
            this.$emit("submit_val", true);
          } else {
            this.$emit("submit_val", false);
            return false;
          }
        });
      }
    },
  },
  data() {
    var validatePass = (rule, value, callback) => {
      if (value === "") {
        callback("请输入内容");
      } else {
        this.$emit("submit_val", true);
        callback();
      }
    };
    return {
      options: [],
      rules: {
        goods_name: [
          { required: true, message: "请输入商品名称", trigger: "blur" },
        ],
        goods_price: [
          { required: true, message: "请输入商品名称", trigger: "blur" },
        ],
        goods_number: [
          { required: true, message: "请输入商品名称", trigger: "blur" },
        ],
        goods_weight: [
          { required: true, message: "请输入商品名称", trigger: "blur" },
        ],
        goods_cat: [
          { required: true, validator: validatePass, trigger: "change" },
        ],
      },
    };
  },
  created() {
    this.initCateGories();
  },
  methods: {
    async initCateGories() {
      const res = await httpCateGories("/categories");
      console.log(res);
      this.options = res.data.data;
    },
    handleChange(val){
      console.log(val)
    },
   
  },
};
</script>